import GridMain from "./gridMain";
import { gridConstant } from "../js/constant";

export default class GridLine {
  lineElement: HTMLCanvasElement;
  ctx: CanvasRenderingContext2D;
  gridMainInstance: GridMain;
  girdSize: number = gridConstant.SIZE;
  constructor(gm: GridMain) {
    this.gridMainInstance = gm;
    this.lineElement = document.createElement("canvas");
    this.setCanvasStyle(this.lineElement);
    this.ctx =
      this.lineElement.getContext("2d") || new CanvasRenderingContext2D();
      this.gridMainInstance.domEle.parentNode?.appendChild(this.lineElement);
  }

  setCanvasStyle(dom: HTMLCanvasElement) {
    dom.style.position = "fixed";
    // 这里clintleft和clientTop是相对于视口的位置,所以需要加上girdmain canvas的左边距和上边距
    dom.style.left = this.gridMainInstance.ctx.canvas.clientLeft + "px"; // 获取girdmian canvas的左边距,设置lineElement的左边距,使lineElement与girdmain canvas对齐
    dom.style.top =  this.gridMainInstance.ctx.canvas.clientTop + "px"; // 获取girdmian canvas的上边距,设置lineElement的上边距,使lineElement与girdmain canvas对齐
    dom.style.zIndex = "-1";
    dom.width = this.gridMainInstance.ctx.canvas.width;
    dom.height = this.gridMainInstance.ctx.canvas.height;
  }
  draw(loop=true) {
    this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
    const gridSize = this.gridMainInstance.getRatioSize(gridConstant.SIZE)
    const diffX =
      this.gridMainInstance.ctx.canvas.height -
      this.gridMainInstance.staticPos.y;
    const diffY =
      this.gridMainInstance.ctx.canvas.width -
      this.gridMainInstance.staticPos.x;
    const xLineCountPlus = Math.ceil(diffX / gridSize);
    const yLineCountPlus = Math.ceil(diffY / gridSize);
    // 表示原点的正负方向上应该绘制的线条数量
    const xLineCountMinus = Math.ceil( this.gridMainInstance.staticPos.y / gridSize);
    const yLineCountMinus = Math.ceil( this.gridMainInstance.staticPos.x / gridSize);

    for(let i = 0; i< xLineCountPlus; i++) {
      this.ctx.beginPath();
      // 表示从左到右绘制线条，所以x坐标为0，y坐标为this.gridMainInstance.staticPos.y + i * gridSize，表示从原点向下绘制线条，间隔为gridSize，一共绘制xLineCountPlus条
      this.ctx.moveTo(0, this.gridMainInstance.staticPos.y + i * gridSize);
      this.ctx.lineTo(this.gridMainInstance.ctx.canvas.width, this.gridMainInstance.staticPos.y + i * gridSize);
      this.ctx.strokeStyle = i === 0 ? gridConstant.zeroColor : (i % 5 === 0 ? gridConstant.solidColor : gridConstant.dashedColor);// 如果为 0 则用蓝色标记，取余 5 为实线，其余为比较淡的线
      this.ctx.stroke();
    }

    for(let i = 0; i< xLineCountMinus; i++) {
      this.ctx.beginPath();
      this.ctx.moveTo(0, this.gridMainInstance.staticPos.y - i * gridSize);
      this.ctx.lineTo(this.gridMainInstance.ctx.canvas.width, this.gridMainInstance.staticPos.y - i * gridSize);
      this.ctx.strokeStyle = i === 0 ? gridConstant.zeroColor : (i % 5 === 0 ? gridConstant.solidColor : gridConstant.dashedColor)
      this.ctx.stroke();
    }

    for(let i = 0; i< yLineCountPlus; i++) {
      this.ctx.beginPath();
      this.ctx.moveTo(this.gridMainInstance.staticPos.x + i * gridSize, 0);
      this.ctx.lineTo(this.gridMainInstance.staticPos.x + i * gridSize, this.gridMainInstance.ctx.canvas.height);
      this.ctx.strokeStyle = i === 0 ? gridConstant.zeroColor : (i % 5 === 0 ? gridConstant.solidColor : gridConstant.dashedColor)
      this.ctx.stroke();
    }

    for(let i = 0; i< yLineCountMinus; i++) {
      this.ctx.beginPath();
      this.ctx.moveTo(this.gridMainInstance.staticPos.x - i * gridSize, 0);
      this.ctx.lineTo(this.gridMainInstance.staticPos.x - i * gridSize, this.gridMainInstance.ctx.canvas.height);
      this.ctx.strokeStyle = i === 0 ? gridConstant.zeroColor : (i % 5 === 0 ? gridConstant.solidColor : gridConstant.dashedColor)
      this.ctx.stroke();
    }
    window.requestAnimationFrame(() => {
      this.draw(loop);
    })
  }
}
